<!DOCTYPE html>
<html>
	<head>
		<title>商品标签</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css"> 
		<script src="../../static/vue.min.js"></script>
		<script src="../../static/kj/element-ui/index.js"></script>
		<script src="../../static/jquery.min.js"></script>
		<script src="../../static/kj/layer/layer.js"></script>
		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/router.js"></script>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<div class="c-panel">
				<!-- 参数栏 -->
				<div class="c-title">检索参数</div>
				<el-form>
					<div class="c-item">
						<label class="c-label">商品名称：</label>
						<el-input size="mini" v-model="p.goods_name" clearable></el-input>
					</div>
					<div class="c-item" style="min-width: 0px;">
						<el-button size="mini" type="primary" icon="el-icon-search" @click="f5()">查询</el-button>
						<el-button size="mini" type="primary" icon="el-icon-plus" @click="add()">新增</el-button>
					</div>
				</el-form>
				<!-- 数据列表 -->
				<el-table class="data-table" ref="data-table" :data="dataList" size="small">
					<el-table-column label="ID" prop="goods_id"></el-table-column>
					<el-table-column label="商品名称" prop="name"></el-table-column>
					<el-table-column label="商品编号" prop="goods_bn"></el-table-column>
					<el-table-column label="发布平台" prop="platforms"></el-table-column>
					<el-table-column label="市场价" prop="market_price"></el-table-column>
					<el-table-column label="销售价" prop="sales_price"></el-table-column>
					<el-table-column label="单位" prop="unit"></el-table-column>
					<el-table-column label="标签" prop="tags"></el-table-column>
					<el-table-column label="关键词" prop="keywords"></el-table-column>
					<el-table-column label="前台显示">
						<template slot-scope="s">
							<el-switch v-model="s.row.is_show_front" :active-value="1" :inactive-value="0" inactive-color="#C0C4CC"></el-switch>
							<b style="color: green;" v-if="s.row.is_show_front == 1">是</b>
							<b style="color: #C0C4CC;" v-if="s.row.is_show_front == 0">否</b>
						</template>
					</el-table-column>
					<el-table-column label="预售">
						<template slot-scope="s">
							<el-switch v-model="s.row.is_presale" :active-value="1" :inactive-value="0" inactive-color="#C0C4CC"></el-switch>
							<b style="color: green;" v-if="s.row.is_presale == 1">是</b>
							<b style="color: #C0C4CC;" v-if="s.row.is_presale == 0">否</b>
						</template>
					</el-table-column>
					<el-table-column label="新品">
						<template slot-scope="s">
							<el-switch v-model="s.row.is_new" :active-value="1" :inactive-value="0" inactive-color="#C0C4CC"></el-switch>
							<b style="color: green;" v-if="s.row.is_new == 1">是</b>
							<b style="color: #C0C4CC;" v-if="s.row.is_new == 0">否</b>
						</template>
					</el-table-column>
					<el-table-column label="热卖">
						<template slot-scope="s">
							<el-switch v-model="s.row.is_hot" :active-value="1" :inactive-value="0" inactive-color="#C0C4CC"></el-switch>
							<b style="color: green;" v-if="s.row.is_hot == 1">是</b>
							<b style="color: #C0C4CC;" v-if="s.row.is_hot == 0">否</b>
						</template>
					</el-table-column>
					<el-table-column label="在售">
						<template slot-scope="s">
							<el-switch v-model="s.row.on_sale" :active-value="1" :inactive-value="0" inactive-color="#C0C4CC"></el-switch>
							<b style="color: green;" v-if="s.row.on_sale == 1">是</b>
							<b style="color: #C0C4CC;" v-if="s.row.on_sale == 0">否</b>
						</template>
					</el-table-column>
					<el-table-column label="赠品">
						<template slot-scope="s">
							<el-switch v-model="s.row.is_gift" :active-value="1" :inactive-value="0" inactive-color="#C0C4CC"></el-switch>
							<b style="color: green;" v-if="s.row.is_gift == 1">是</b>
							<b style="color: #C0C4CC;" v-if="s.row.is_gift == 0">否</b>
						</template>
					</el-table-column>
					<el-table-column label="创建日期">
						<template slot-scope="s">
							{{sa.forDate(s.row.created_at, 2)}}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="220px">
						<template slot-scope="s">
							<el-button type="text" size="mini" @click="update(s.row)">修改</el-button>
							<el-button type="text" size="mini" @click="del(s.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!--  分页  -->
				<div class="page-box">
					<el-pagination background
						layout="total, prev, pager, next, sizes, jumper" 
						:current-page.sync="p.page" 
						:page-size.sync="p.page_size" 
						:total="total" 
						:page-sizes="[20]" 
						@current-change="f5()" 
						@size-change="f5()">
					</el-pagination>
				</div>
			</div>
		</div>
        <script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					sa: sa, 	// 超级对象
					p: {	// 查询参数 
						name: '',
						page: 1,
						page_size: 20
					},
					dataList: [],	// 数据集合
					total: 0,
				},
				methods: {
					// 刷新
					f5: function(){
						sa.ajax(router.getGoodsList, this.p, function(res){
							this.dataList = res.list;	// 数据
							this.total = res.total;
							sa.f5TableHeight();		// 刷新表格高度 
						}.bind(this), {type:'get'});
					},
					// 修改
					update: function (data) {
						sa_admin.showTab({id:90003, name: "修改商品", url: "view/goods/goods-edit.html?id=" + data.goods_id});
					},
					// 删除
					del: function (data) {
						if(data.is_system == 1){
							return sa.alert('此数据是维持系统正常运行的重要数据<p style="color: red;">已被锁定，不可删除</p>');
						}
						sa.confirm('是否删除，此操作不可撤销', function(){
							sa.ajax(router.deleteGoods,{id: data.id},function(res){
								sa.arrayDelete(app.dataList, data);
								sa.ok('删除成功');
								sa.f5TableHeight();		// 刷新表格高度 
							});
						})
					},
					// 添加
					add: function () {
						sa_admin.showTab({id:90002, name: "发布商品", url: "view/goods/goods-add.html?goods_id=-1"});
					},
				},
				created: function(){
					this.f5();
					sa.onInputEnter();		// 监听输入框的回车事件，执行查询  
				}
			});
		</script>
	</body>
</html>